<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>商品详情</title>
    <link rel="icon" href="./images/bitbug_favicon.ico">
    <link rel="stylesheet" href="./css/ItemDetails.css">
    <link rel="stylesheet" href="./font_2481939_cgiqmkfadol/iconfont.css">
</head>
<body>
    <div class="header">
        <a href="#" class="header_img">
            <img src="./images/xhsdHeader.webp" alt="">
        </a>
        <nav class="navbar">
            <div class="nav_left fl">
                <span>早上好！</span>
                <span>找的中意的书了吗？</span>
                <span class="nav_span">
                    <a href="">请登录</a>
                    <a href="">免费注册</a>
                </span>
            </div>
            <div class="nav_right fr">
                <ul>
                    <li><a href="#">我的学习</a></li>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="itme_li">
                        <a href="#">客户服务</a>
                        <ul class="itme_li_dis">
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">新闻公告</a></li>
                        </ul>
                    </li>
                    <li style="border-right: none;" class="qr_itme_li">
                        <a href="#">手机新华</a>
                        <div class="qr_itme_img">
                            <b></b>
                            <img src="https://img4.xinhuashudian.com/images/2018/08/20/2f411ec2-e95b-41c1-8fb5-ef47fd8c5642.png?x-oss-process=image/format,webp" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- 搜索栏 -->
    <div class="big_search">
        <div class="search">
            <a href="#" class="fl search_a">
                <img src="https://img9.xinhuashudian.com/images/2018/07/21/5787d6ac-4e5a-4741-935e-af74953779a7.png?x-oss-process=image/format,webp" alt="">
            </a>
            <div class="subnav fl">
                <input type="text" name="keyword" class="subnav_input" placeholder="论中国共产党历史" value="" autocomplete="off">
                <span>
                    <button class="subnav_btn" type="submit">
                        <i class="iconfont">&#xe662;</i>
                    </button>   
                </span>
                <div class="search_hot">
                    <ul>
                        <li><span>热门搜索</span></li>
                        <li><a href="#">习近平扶贫故事</a></li>
                        <li><a href="#">北京冬奥会</a></li>
                        <li><a href="#">日历2021</a></li>
                        <li><a href="#">诗词名句</a></li>
                        <li><a href="#">新华英雄笔</a></li>
                    </ul>
                </div>
            </div>
            <div class="big_shopping fl">
                <div class="shopping">
                    <a href="./cart.html">
                        <i class="iconfont icon">&#xe628;</i>
                        购物车
                        <span class="shopping_num">0</span>
                        件
                        <i class="iconfont">&#xe61c;</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品分类 -->
    <div class="categorise">
        <div class="categorise_cont auto">
            <div class="categorise_nav fl">
                <a href="#">
                    <i class="iconfont">&#xe601;</i>
                    <span>全部商品分类</span>
                </a>
            </div>
            <ul class="categorise_menu fl">
                <li><a href="#">商城首页</a></li>
                <li><a href="#">主题出版</a></li>
                <li><a href="#">中版书房</a></li>
                <li><a href="#">新华优选</a></li>
                <li><a href="#">新华定制</a></li>
                <li><a href="#">新华惠农</a></li>
                <li><a href="#">新华直播</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">新时代 · 新经典</a></li>
            </ul>
        </div>
    </div>
    <div class="page auto clearfix">
        <div class="menu">
            <ul >
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li class="fisrt_li">
                                <h3>热门图书</h3>
                                <a href="#">解忧杂货铺</a>
                                <a href="#">浮生六记</a>
                                <a href="#">自在独行</a>
                                <a href="#">三体</a>
                                <a href="#">围城</a>
                                <a href="#">摆渡人</a>
                            </li>
                            <li>
                                <h3>小说</h3>
                                <a href="#">中国小说</a>
                                <a href="#">外国小说</a>
                            </li>
                            <li>
                                <h3>文学</h3>
                                <a href="#">外国文学</a>
                                <a href="#">中国文学</a>
                                <a href="#">文学理论</a>
                            </li>
                            <li>
                                <h3>艺术</h3>
                                <a href="#">摄影</a>
                                <a href="#">鉴赏收藏</a>
                                <a href="#">艺术概论</a>
                                <a href="#">音乐舞蹈</a>
                                <a href="#">书法篆刻</a>
                                <a href="#">戏剧影视</a>
                                <a href="#">绘画雕塑</a>
                            </li>
                            <li>
                                <h3>传记</h3>
                                <a href="#">传记</a>
                            </li>
                        </ul>
                    </div> 
                    <div class="submenu">
                        <a href="#" class="submenu_title">文学艺术</a>
                        <ul>
                            <li>
                                <a href="#">小说</a>
                            </li>
                            <li>
                                <a href="#">文学</a>
                            </li>
                            <li>
                                <a href="#">艺术</a>
                            </li>
                            <li>
                                <a href="#">传记</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>历史</h3>
                                <a href="#">世界史</a>
                                <a href="#">中国史</a>
                                <a href="#">考古文物</a>
                                <a href="#">史学理论</a>
                            </li>
                            <li>
                                <h3>哲学宗教</h3>
                                <a href="#">中国哲学</a>
                                <a href="#">西方哲学</a>
                                <a href="#">哲学总论</a>
                                <a href="#">马列著作</a>
                                <a href="#">逻辑学</a>
                                <a href="#">宗教</a>
                                <a href="#">伦理学</a>
                                <a href="#">美学</a>
                            </li>
                            <li>
                                <h3>法律</h3>
                                <a href="#">法律法规</a>
                                <a href="#">法学理论</a>
                                <a href="#">法律科普</a>
                                <a href="#">中国法律</a>
                                <a href="#">外国及澳港台法律</a>
                                <a href="#">宗教</a>
                                <a href="#">伦理学</a>
                                <a href="#">美学</a>
                            </li>
                            <li>
                                <h3>心理</h3>
                                <a href="#">心理学百科</a>
                                <a href="#">变态/病态心理学</a>
                            </li>
                            <li>
                                <h3>政治军事</h3>
                                <a href="#">党政读物</a>
                                <a href="#">中国政治</a>
                                <a href="#">世界政治</a>
                                <a href="#">中国军事</a>
                                <a href="#">军事理论</a>
                                <a href="#">国际关系</a>
                                <a href="#">政治理论</a>
                            </li>
                            <li>
                                <h3>社会科学</h3>
                                <a href="#">社会科学总论</a>
                                <a href="#">社会学</a>
                                <a href="#">语言文字</a>
                            </li>
                            <li>
                                <h3>文化</h3>
                                <a href="#">文化理论</a>
                                <a href="#">民族/民俗文化</a>
                                <a href="#">地域文化</a>
                                <a href="#">文化研究与交流</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">人文社科</a>
                        <ul>
                            <li>
                                <a href="#">历史</a>
                            </li>
                            <li>
                                <a href="#">哲学宗教</a>
                            </li>
                            <li>
                                <a href="#">心理</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>儿童文学</h3>
                                <a href="#">中国儿童文学</a>
                                <a href="#">外国儿童文学</a>
                                <a href="#">童话寓言</a>
                            </li>
                            <li>
                                <h3>动漫绘本</h3>
                                <a href="#">儿童绘本</a>
                            </li>
                            <li>
                                <h3>启蒙益智</h3>
                                <a href="#">益智游戏</a>
                                <a href="#">书法绘画</a>
                                <a href="#">艺术培养</a>
                                <a href="#">识字说话</a>
                                <a href="#">科普百科</a>
                                <a href="#">低幼读物</a>
                            </li>
                            <li>
                                <h3>技能培养</h3>
                                <a href="#">艺术培养</a>
                                <a href="#">书法绘画</a>
                                <a href="#">少儿技能</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">少儿童书</a>
                        <ul>
                            <li>
                                <a href="#">儿童文学</a>
                            </li>
                            <li>
                                <a href="#">科普百科</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>中小学教育</h3>
                                <a href="#">小学数学</a>
                                <a href="#">小学语文</a>
                                <a href="#">小学教材</a>
                                <a href="#">初中语文</a>
                                <a href="#">初中数学</a>
                                <a href="#">初中英语</a>
                                <a href="#">初中理化</a>
                                <a href="#">初中教材</a>
                                <a href="#">高中语文</a>
                                <a href="#">高中数学</a>
                                <a href="#">高中外语</a>
                                <a href="#">高中理化</a>
                            </li>
                            <li>
                                <h3>外语学习</h3>
                                <a href="#">英语</a>
                                <a href="#">小语种</a>
                            </li>
                            <li>
                                <h3>大中专教材</h3>
                                <a href="#">大学教材</a>
                                <a href="#">成人教育</a>
                            </li>
                            <li>
                                <h3>字典词典</h3>
                                <a href="#">字典词典、工具书</a>
                            </li>
                            <li>
                                <h3>考试</h3>
                                <a href="#">计算机类</a>
                                <a href="#">其他语种</a>
                                <a href="#">其他考试</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">教育考试</a>
                        <ul>
                            <li>
                                <a href="#">中小教辅</a>
                            </li>
                            <li>
                                <a href="#">外语学习</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>管理</h3>
                                <a href="#">市场营销</a>
                                <a href="#">管理学</a>
                                <a href="#">公共关系</a>
                                <a href="#">旅游管理</a>
                                <a href="#">生产管理</a>
                                <a href="#">工商管理</a>
                                <a href="#">企业经营管理</a>
                            </li>
                            <li>
                                <h3>经济</h3>
                                <a href="#">中国经济</a>
                                <a href="#">世界经济</a>
                                <a href="#">工业经济</a>
                                <a href="#">贸易</a>
                                <a href="#">交通经济</a>
                                <a href="#">企业经济</a>
                                <a href="#">产业经济</a>
                            </li>
                            <li>
                                <h3>金融会计</h3>
                                <a href="#">金融</a>
                                <a href="#">会计</a>
                            </li>
                            <li>
                                <h3>成功励志</h3>
                                <a href="#">成功励志</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">经济金融</a>
                        <ul>
                            <li>
                                <a href="#">管理</a>
                            </li>
                            <li>
                                <a href="#">经济</a>
                            </li>
                            <li>
                                <a href="#">金融会计</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>时尚娱乐</h3>
                                <a href="#">服饰搭配</a>
                                <a href="#">休闲游戏</a>
                                <a href="#">美容护肤</a>
                            </li>
                            <li>
                                <h3>家庭家居</h3>
                                <a href="#">宠物</a>
                                <a href="#">家庭家饰</a>
                                <a href="#">家庭园艺</a>
                                <a href="#">生活DIY</a>
                            </li>
                            <li>
                                <h3>养生保健</h3>
                                <a href="#">健康百科</a>
                                <a href="#">家庭保障</a>
                            </li>
                            <li>
                                <h3>烹饪美食</h3>
                                <a href="#">家常菜谱</a>
                                <a href="#">茶酒饮品</a>
                                <a href="#">烘焙甜点</a>
                            </li>
                            <li>
                                <h3>育儿早教</h3>
                                <a href="#">育儿百科</a>
                                <a href="#">家庭教育</a>
                            </li>
                            <li>
                                <h3>体育运动</h3>
                                <a href="#">体育理论与规则</a>
                                <a href="#">球类运动</a>
                                <a href="#">其他运动</a>
                            </li>
                            <li>
                                <h3>旅游地图</h3>
                                <a href="#">国外游</a>
                                <a href="#">旅游随笔/摄影</a>
                                <a href="#">地图</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">生活休闲</a>
                        <ul>
                            <li>
                                <a href="#">烹饪美食</a>
                            </li>
                            <li>
                                <a href="#">育儿早教</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>工业科技</h3>
                                <a href="#">轻工业</a>
                                <a href="#">机械工业</a>
                                <a href="#">化学工业</a>
                                <a href="#">电子通讯</a>
                                <a href="#">能源</a>
                                <a href="#">交通运输</a>
                                <a href="#">航空航天</a>
                                <a href="#">矿业工程</a>
                            </li>
                            <li>
                                <h3>建筑</h3>
                                <a href="#">建筑理论与文化</a>
                                <a href="#">建筑设计</a>
                                <a href="#">建筑工程</a>
                                <a href="#">水利水电</a>
                            </li>
                            <li>
                                <h3>医学</h3>
                                <a href="#">基础医学</a>
                                <a href="#">临床医学</a>
                                <a href="#">中医</a>
                                <a href="#">医药</a>
                                <a href="#">外科学</a>
                                <a href="#">内科学</a>
                                <a href="#">儿科学</a>
                                <a href="#">妇产科学</a>
                            </li>
                            <li>
                                <h3>自然科学</h3>
                                <a href="#">自然科普</a>
                                <a href="#">数学</a>
                                <a href="#">物理</a>
                                <a href="#">化学</a>
                                <a href="#">生物科学</a>
                                <a href="#">天文地理</a>
                                <a href="#">其他自然科学</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">科学技术</a>
                        <ul>
                            <li>
                                <a href="#">工业科技</a>
                            </li>
                            <li>
                                <a href="#">建筑</a>
                            </li>
                            <li>
                                <a href="#">医学</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>文学艺术</h3>
                                <a href="#">艺术</a>
                                <a href="#">外国文学</a>
                                <a href="#">文学</a>
                                <a href="#">中国文学</a>
                            </li>
                            <li>
                                <h3>经济金融</h3>
                                <a href="#">经济</a>
                                <a href="#">金融</a>
                                <a href="#">管理</a>
                                <a href="#">励志成功</a>
                            </li>
                            <li>
                                <h3>人文社科</h3>
                                <a href="#">历史</a>
                                <a href="#">政治军事</a>
                                <a href="#">哲学</a>
                                <a href="#">社会科学</a>
                                <a href="#">宗教术学</a>
                                <a href="#">心理学</a>
                                <a href="#">文化</a>
                                <a href="#">工具书</a>
                            </li>
                            <li>
                                <h3>生活休闲</h3>
                                <a href="#">旅游地图</a>
                                <a href="#">烹饪美食</a>
                                <a href="#">养生保健</a>
                                <a href="#">时尚娱乐</a>
                            </li>
                            <li>
                                <h3>教育专区</h3>
                                <a href="#">中小学辅导</a>
                                <a href="#">教学教参</a>
                                <a href="#">学科专业杂志</a>
                                <a href="#">外语学习</a>
                            </li>
                            <li>
                                <h3>少儿童书</h3>
                                <a href="#">少儿启蒙</a>
                                <a href="#">少儿百科</a>
                                <a href="#">动漫绘本</a>
                                <a href="#">少儿文学</a>
                            </li>
                            <li>
                                <h3>自然科学</h3>
                                <a href="#">物理</a>
                                <a href="#">其他</a>
                            </li>
                            <li>
                                <h3>新时代 新经典</h3>
                                <a href="#">学习经典</a>
                            </li>
                            <li>
                                <h3>其他</h3>
                                <a href="#">其他</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">电子书</a>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>米面杂粮</h3>
                                <a href="#">杂粮</a>
                                <a href="#">大米</a>
                                <a href="#">小米</a>
                                <a href="#">豆类</a>
                                <a href="#">面粉</a>
                                <a href="#">其他粮食</a>
                                <a href="#">粮食干货礼盒</a>
                            </li>
                            <li>
                                <h3>油</h3>
                                <a href="#">橄榄油</a>
                                <a href="#">食用油</a>
                                <a href="#">香油</a>
                                <a href="#">山茶油</a>
                            </li>
                            <li>
                                <h3>调味品</h3>
                                <a href="#">酱菜</a>
                                <a href="#">调味酱/酱料</a>
                                <a href="#">火锅底料</a>
                                <a href="#">乳制品</a>
                            </li>
                            <li>
                                <h3>方便速食</h3>
                                <a href="#">风味小吃</a>
                                <a href="#">方便面</a>
                                <a href="#">速食汤</a>
                                <a href="#">挂面/面条</a>
                            </li>
                            <li>
                                <h3>南北干货</h3>
                                <a href="#">粉丝粉条</a>
                                <a href="#">香菇</a>
                                <a href="#">木耳</a>
                                <a href="#">枸杞</a>
                            </li>
                            <li>
                                <h3>蛋制品</h3>
                                <a href="#">鸡蛋</a>
                                <a href="#">鸭蛋</a>
                            </li>
                            <li>
                                <h3>茗茶</h3>
                                <a href="#">红茶</a>
                                <a href="#">绿茶</a>
                                <a href="#">茉莉花茶</a>
                                <a href="#">花草茶</a>
                                <a href="#">普洱茶</a>
                                <a href="#">乌龙茶</a>
                                <a href="#">其他茶叶</a>
                                <a href="#">白茶</a>
                            </li>
                            <li>
                                <h3>咖啡/饮料/麦片/冲饮</h3>
                                <a href="#">饮用水</a>
                                <a href="#">咖啡</a>
                                <a href="#">麦片</a>
                                <a href="#">冲饮</a>
                                <a href="#">果味饮料</a>
                                <a href="#">姜粉/姜茶</a>
                                <a href="#">碳酸饮料</a>
                                <a href="#">豆奶/豆粉</a>
                                <a href="#">谷物</a>
                                <a href="#">藕粉</a>
                            </li>
                            <li>
                                <h3>乳制品</h3>
                                <a href="#">牛奶</a>
                                <a href="#">酸奶</a>
                            </li>
                            <li>
                                <h3>零食坚果</h3>
                                <a href="#">蔬菜水果干</a>
                                <a href="#">海味即食</a>
                                <a href="#">肉干肉铺</a>
                                <a href="#">膨化食品</a>
                                <a href="#">糕点点心</a>
                                <a href="#">果冻布丁</a>
                                <a href="#">糖果/巧克力</a>
                                <a href="#">水果罐头</a>
                                <a href="#">蜜饯果干</a>
                                <a href="#">卤味零食</a>
                                <a href="#">豆干制品</a>
                                <a href="#">坚果炒货</a>
                            </li>
                            <li>
                                <h3>保健食品</h3>
                                <a href="#">营养膳食补充</a>
                                <a href="#">石斛</a>
                                <a href="#">灵芝</a>
                                <a href="#">蜂蜜</a>
                                <a href="#">阿胶</a>
                                <a href="#">燕窝</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">食品保健</a>
                        <ul>
                            <li>
                                <a href="#">米面杂粮</a>
                            </li>
                            <li>
                                <a href="#">茗茶</a>
                            </li>
                            <li>
                                <a href="#">酒水</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>居家日用</h3>
                                <a href="#">暖手袋/热水袋</a>
                                <a href="#">眼罩</a>
                                <a href="#">伞</a>
                                <a href="#">体温计</a>
                                <a href="#">迷你风扇</a>
                                <a href="#">扇子</a>
                                <a href="#">挂钩</a>
                                <a href="#">干衣架</a>
                                <a href="#">肥皂架</a>
                                <a href="#">杯垫</a>
                                <a href="#">驱虫用品</a>
                            </li>
                            <li>
                                <h3>防护用品</h3>
                                <a href="">防护眼镜</a>
                                <a href="">口罩</a>
                            </li>
                            <li>
                                <h3>收纳</h3>
                                <a href="">家庭收纳</a>
                                <a href="">证照收纳</a>
                                <a href="">文件收纳</a>
                                <a href="">柜式收纳</a>
                            </li>
                            <li>
                                <h3>家务清洁</h3>
                                <a href="">除味用品</a>
                                <a href="">垃圾桶</a>
                                <a href="">垃圾袋</a>
                                <a href="">抹布/百洁布</a>
                                <a href="">清洁剂</a>
                                <a href="">围裙</a>
                            </li>
                            <li>
                                <h3>洗护清洁</h3>
                                <a href="">抽纸</a>
                                <a href="">卷纸</a>
                                <a href="">湿巾</a>
                                <a href="">衣物清洁</a>
                                <a href="">洗脸巾</a>
                                <a href="">洗手液</a>
                                <a href="">足浴饼</a>
                                <a href="">梳子</a>
                            </li>
                            <li>
                                <h3>家纺布艺</h3>
                                <a href="">床上用品</a>
                                <a href="">地毯/地垫</a>
                                <a href="">靠枕/抱枕</a>
                                <a href="">毛巾/浴巾/浴袍</a>
                            </li>
                            <li>
                                <h3>厨房/餐饮用品</h3>
                                <a href="">水具</a>
                                <a href="">茶具</a>
                                <a href="">酒具</a>
                                <a href="">餐具</a>
                                <a href="">烹饪用具</a>
                                <a href="">保鲜器具</a>
                                <a href="">一次性餐桌用品</a>
                            </li>
                            <li>
                                <h3>节庆用品/礼品</h3>
                                <a href="">红包/利是封</a>
                                <a href="">节庆用品</a>
                                <a href="">储蓄罐</a>
                                <a href="">创意礼盒</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">家居/生活用品</a>
                        <ul>
                            <li>
                                <a href="#">居家日用</a>
                            </li>
                            <li>
                                <a href="#">餐饮用品</a>
                            </li>
                            <li>
                                <a href="#">家纺布艺</a>
                            </li>
                            <li>
                                <a href="#">日常收纳</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>阅读器</h3>
                                <a href="#">阅览器/电纸书</a>
                                <a href="#">阅读器保护套</a>
                            </li>
                            <li>
                                <h3>学习机</h3>
                                <a href="#">学习机</a>
                            </li>
                            <li>
                                <h3>电子词典</h3>
                            </li>
                            <li>
                                <h3>纸张本册</h3>
                                <a href="#">笔记本/记事本</a>
                                <a href="#">便签本/N次贴</a>
                                <a href="#">拍纸本/日程本</a>
                                <a href="#">信封</a>
                                <a href="#">奖状/证书</a>
                                <a href="#">复写纸</a>
                                <a href="#">分页/索引/标签</a>
                                <a href="#">明信片/卡片</a>
                                <a href="#">单词卡</a>
                                <a href="#">作业本</a>
                                <a href="#">手账本</a>
                            </li>
                            <li>
                                <h3>书写工具</h3>
                                <a href="#">中性笔</a>
                                <a href="#">钢笔</a>
                                <a href="#">铅笔/自动铅笔</a>
                                <a href="#">圆珠笔</a>
                                <a href="#">荧光笔</a>
                                <a href="#">记号笔</a>
                                <a href="#">笔用墨水</a>
                                <a href="#">铅笔芯</a>
                            </li>
                            <li>
                                <h3>书画工具</h3>
                                <a href="#">彩色铅笔</a>
                                <a href="#">勾线笔</a>
                                <a href="#">画材套装</a>
                                <a href="#">画图</a>
                                <a href="#">画纸</a>
                                <a href="#">蜡笔</a>
                                <a href="#">临摹桌</a>
                                <a href="#">毛笔</a>
                                <a href="#">水彩笔</a>
                                <a href="#">颜料</a>
                                <a href="#">砚台</a>
                                <a href="#">印章</a>
                                <a href="#">镇尺</a>
                                <a href="#">镇纸</a>
                                <a href="#">笔山/笔架</a>
                            </li>
                            <li>
                                <h3>日常学习用品</h3>
                                <a href="#">胶粘用品</a>
                                <a href="#">修正液/修正带</a>
                                <a href="#">握笔器</a>
                                <a href="#">桌面书架</a>
                                <a href="#">书签</a>
                                <a href="#">各类尺/三角板</a>
                                <a href="#">胶水/胶棒</a>
                                <a href="#">纸胶带</a>
                                <a href="#">卷笔刀/削笔器</a>
                                <a href="#">橡皮</a>
                                <a href="#">学生书包</a>
                                <a href="#">书立</a>
                                <a href="#">文具收纳</a>
                                <a href="#">其他学习用品</a>
                                <a href="#">手写板</a>
                                <a href="#">笔袋</a>
                                <a href="#">文具套装</a>
                            </li>
                            <li>
                                <h3>乐器</h3>
                                <a href="#">口琴</a>
                                <a href="#">架子鼓</a>
                                <a href="#">钢琴</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">学习用品</a>
                        <ul>
                            <li>
                                <a href="#">纸本书册</a>
                            </li>
                            <li>
                                <a href="#">学习用品</a>
                            </li>
                            <li>
                                <a href="#">书写用具</a>
                            </li>
                            <li>
                                <a href="#">书画用具</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>相机/摄影机</h3>
                            </li>
                            <li>
                                <h3>电脑周边</h3>
                                <a href="#">电脑支架</a>
                                <a href="#">键盘</a>
                                <a href="#">麦克风/话筒</a>
                                <a href="#">鼠标</a>
                                <a href="#">鼠标垫</a>
                                <a href="#">电脑收纳包</a>
                            </li>
                            <li>
                                <h3>智能设备</h3>
                                <a href="#">翻译器</a>
                                <a href="#">智能机器人</a>
                                <a href="#">智能手表/手环</a>
                                <a href="#">智能书柜</a>
                            </li>
                            <li>
                                <h3>手机配件</h3>
                                <a href="#">充电器</a>
                                <a href="#">自拍杆/架</a>
                                <a href="#">手机支架</a>
                                <a href="#">指环扣</a>
                                <a href="#">手机保护壳/套</a>
                                <a href="#">手机扩音座</a>
                            </li>
                            <li>
                                <h3>存储设备</h3>
                                <a href="#">内存卡</a>
                                <a href="#">普通U盘</a>
                                <a href="#">手机U盘</a>
                                <a href="#">移动硬盘</a>
                            </li>
                            <li>
                                <h3>网络设备</h3>
                                <a href="#">普通路由器</a>
                            </li>
                            <li>
                                <h3>数码配件</h3>
                                <a href="#">移动电源</a>
                                <a href="#">收纳</a>
                                <a href="#">数码周边</a>
                            </li>
                            <li>
                                <h3>游戏/电玩</h3>
                                <a href="#">游戏手柄</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">3C数码</a>
                        <ul>
                            <li>
                                <a href="#">生活电器</a>
                            </li>
                            <li>
                                <a href="#">厨房电器</a>
                            </li>
                            <li>
                                <a href="#">影音电器</a>
                            </li>
                            <li>
                                <a href="#">个人护理</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
                <li>
                    <div class="SecondaryMenu">
                        <ul>
                            <li>
                                <h3>童鞋/婴儿鞋</h3>
                            </li>
                            <li>
                                <h3>童装/婴儿装</h3>
                                <a href="#">儿童帽子</a>
                            </li>
                            <li>
                                <h3>奶粉/辅食</h3>
                            </li>
                            <li>
                                <h3>玩具</h3>
                                <a href="#">绘画类</a>
                                <a href="#">拼图</a>
                                <a href="#">桌游游戏/棋牌</a>
                                <a href="#">玩具挂图/认知卡</a>
                                <a href="#">拼插玩具/手工制作DIY</a>
                                <a href="#">解谜/魔方</a>
                                <a href="#">积木</a>
                                <a href="#">其他玩具</a>
                                <a href="#">儿童运动用品</a>
                                <a href="#">游乐设施</a>
                                <a href="#">户外玩具</a>
                                <a href="#">毛绒玩具</a>
                                <a href="#">八音盒/音乐盒</a>
                                <a href="#">鼓</a>
                                <a href="#">沙蛋/沙锤</a>
                                <a href="#">发光玩具</a>
                                <a href="#">遥控电动</a>
                                <a href="#">儿童相机</a>
                            </li>
                            <li>
                                <h3>盲盒/模型</h3>
                                <a href="#">盲盒</a>
                                <a href="#">手办/玩偶</a>
                                <a href="#">机械模型</a>
                            </li>
                            <li>
                                <h3>孕产用品/营养</h3>
                            </li>
                            <li>
                                <h3>婴童出行用品</h3>
                                <a href="#">防走失安全带</a>
                                <a href="#">小书包</a>
                            </li>
                            <li>
                                <h3>婴童生活用品</h3>
                                <a href="#">婴童餐具</a>
                                <a href="#">暖奶器</a>
                                <a href="#">儿童电动牙刷</a>
                                <a href="#">身高尺</a>
                                <a href="#">爬行垫</a>
                                <a href="#">儿童手表</a>
                            </li>
                        </ul>
                    </div>
                    <div class="submenu">
                        <a href="#" class="submenu_title">母婴/玩具</a>
                        <ul>
                            <li>
                                <a href="#">玩具</a>
                            </li>
                            <li>
                                <a href="#">盲盒</a>
                            </li>
                            <li>
                                <a href="#">婴童用品</a>
                            </li>
                        </ul>
                        <div class="direction"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="comm_title auto">
        <!-- <span>你好，科学！（全6册）</span> -->
    </div>
    <!-- 商品详情 -->
    <div class="Details auto clearfix">
        <div class="smlimg">
            <div class="smlbox">
                <!-- <img src="http://img3m5.ddimg.cn/28/13/23526685-1_w_15.jpg" alt=""> -->
                <img src="" alt="">
                <span></span>
            </div>
            <div style="width: 375px; overflow: hidden; padding-left: 4px;">
                <ul class="magnifier">
                    <!-- <li><img src="http://img3m5.ddimg.cn/28/13/23526685-1_w_15.jpg" alt=""></li>
                    <li><img src="https://img9.xinhuashudian.com/images/2021/05/31/e4c4a0d2-a14f-477a-bd04-4f1bf176f75c.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li>
                    <li><img src="https://img4.xinhuashudian.com/images/2021/05/31/c744bb42-f8f0-4fb3-aa80-a079d8cf4f1a.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li>
                    <li><img src="https://img7.xinhuashudian.com/images/2021/05/31/8756bd92-a438-4224-a8f1-068356aec33d.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li>
                    <li><img src="https://img9.xinhuashudian.com/images/2021/05/31/9945462e-7dfd-4eb9-a033-91157efd8626.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li>
                    <li><img src="https://img2.xinhuashudian.com/images/2021/05/31/9dd64b14-d2d3-4d7d-968c-2bdbfef28120.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li>
                    <li><img src="https://img9.xinhuashudian.com/images/2021/05/31/039fccf4-7097-4d2a-8c9c-b9e37512c181.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li>
                    <li><img src="https://img5.xinhuashudian.com/images/2021/05/31/9195a5c1-ef28-40cb-acf9-7bcfffc251ce.jpg?x-oss-process=image/resize,m_mfit,h_750,w_750/format,webp" alt=""></li> -->
                </ul>
            </div>
            <div class="btns">
                <input type="button" class="iconfont" value="&#xe60e;" id="left">
                <input type="button" class="iconfont" value="&#xe62e;" id="right">
            </div>
            <div class="share">
                <a href="#">
                    <span class="iconfont">&#xe6a7;分享</span>
                </a>
                <a href="#">
                    <span class="iconfont">&#xe613;收藏宝贝</span>
                </a>
            </div>
        </div>
        <div class="bigimg">
            <!-- <img src="http://img3m5.ddimg.cn/28/13/23526685-1_w_15.jpg" alt=""> -->
            <img src="" alt="">
        </div>
        <div class="comm_Details">
            <div class="comm_Details_title">
                <!-- <h6 class="title_text">你好，科学！（全6册）</h6> -->
                <h6 class="title_text"></h6>
                <p class="publishing">
                    <!-- <a href="#">青岛出版社</a> 编 <a href="#">英国北方旅行出版公司 编 </a> 著 -->
                </p>
            </div>
            <div class="comm_Details_cont">
                <div class="Details_cont_head">
                    <i class="iconfont">&#xe600;</i>
                    <span>直降</span>
                    <b>距离活动结束 86天</b>
                </div>
                <div class="comm_Details_price">
                    <label>活动价</label>
                    <!-- <span class="price">￥79.00</span>
                    <span class="_price">￥178.00</span> -->
                    <span class="price"></span>
                    <span class="_price"></span>
                </div>
                <div class="Discount">
                    <b for="">优惠券</b>
                    <span>满5-5</span>
                    <span class="iconfont">更多优惠券 &#xe62f;</span>
                </div>
            </div>
            <div class="area">
                <ul>
                    <li class="area_li">
                        <label for="" class="area_left">配送至</label>
                        <div class="area_cen">
                            <span>上海市 &nbsp; </span>
                            <i class="iconfont">&#xe62f;</i>
                            <ul>
                                <li class="active">北京</li>
                                <li>天津</li>
                                <li>河北省</li>
                                <li>山西省</li>
                                <li>山东省</li>
                                <li>上海市</li>
                            </ul>
                        </div>
                        <label for="" class="area_right">该地区有货</label>
                    </li>
                </ul>
            </div>
            <div class="numBtns">
               <ul>
                   <li class="Quantity">
                    <label for="">数量</label>
                    <span class="Less fl">-</span>
                    <span class="num fl">1</span>
                    <span class="push fl">+</span>
                   </li>
                   <li class="purchase">
                      <a href="./cart.html" ><button class="join">加入购物车</button></a>
                      <!-- <button class="join">加入购物车</button> -->
                      <button class="buy">立即购买</button> 
                      <span class="join_span">请先登录</span>
                      <span class="buy_span">商品库存不足，请选择其他商品</span>
                   </li>
               </ul>
            </div>
        </div>
    </div>
</body>
<script src="./libs/require.js" data-main="./js/ItemDetailsMain.js"></script>
<script src="./libs/ajax.js"></script>
<!-- <script src="./libs/jquery.js"></script> -->
<script src="./libs/_move.js"></script>
<script src="./js/ItemDetails.js"></script>
<script>
   onload = function(){
    function Magnifier(ops){
        this.left = ops.left;
        this.right = ops.right;
        this.sBspan = ops.sBspan;
        this.sBox = ops.sBox;
        this.bBox = ops.bBox;
        this.sBimg = ops.sBimg;
        this.bBimg = ops.bBimg;
        this.imgBox = ops.imgBox;
        this.imgs = ops.imgs;
        this.imgBox.style.width = (this.imgs.length+1)*this.imgs[0].offsetWidth +"px";
        this.index = 0;
        this.addEvent();
    }
    Magnifier.prototype.addEvent = function(){
        const _this = this;
        this.sBox.onmouseenter = function(){
            _this.show();
        }
        this.sBox.onmouseleave = function(){
            _this.hide();
        }
        this.sBox.onmousemove = function(eve){
            const e = eve||window.event;
            _this.move(e); 
        }
        this.left.onclick = function(){
            _this.leftChangeIndex();
        }
        this.right.onclick = function(){
            _this.rightChangeIndex();
        }
        for(let i=0;i<this.imgs.length;i++){
            this.imgs[i].onclick = ()=>{
                for(var j=0;j<this.imgs.length;j++){
                    this.imgs[j].style.border = "1px solid #EFF0F5";
                }
                console.log(i);
                this.bBimg.src = this.sBimg.src = this.imgs[i].src;
                this.imgs[i].style.border = "1px solid red"
            }
        }
    Magnifier.prototype.rightChangeIndex = function(){
        if(this.index === this.imgs.length-5){
            this.index = 0;
        }else{
            this.index++;
        }
        this.render();
    }
    Magnifier.prototype.leftChangeIndex = function(){
        if(this.index === 0){
            this.index = 0
        }else{
            this.index--;
        }
        this.render();
    }
    Magnifier.prototype.render = function(){
        move(this.imgBox,{
            left:-this.index*this.imgs[0].offsetWidth
        })
    }
    Magnifier.prototype.show = function(){
        this.bBox.style.display = "block";
        this.sBspan.style.display = "block";
        this.sBspan.style.width = this.sBox.offsetWidth/(this.bBimg.offsetWidth/this.bBox.offsetWidth)+"px";
        this.sBspan.style.height = this.sBox.offsetHeight/(this.bBimg.offsetHeight/this.bBox.offsetHeight)+"px";
    }

    Magnifier.prototype.hide = function(){
        this.bBox.style.display = "none";
        this.sBspan.style.display = "none";
    }
    Magnifier.prototype.move = function(e){
        let L = e.pageX -(this.sBox.offsetWidth /2)- this.sBspan.offsetWidth +140;
        let T = e.pageY -this.sBox.offsetHeight- this.sBspan.offsetHeight/2 -20;


        if(L < 0) L = 0;
        if(T < 0) T = 0;
        if(L > this.sBox.offsetWidth - this.sBspan.offsetWidth){
            L = this.sBox.offsetWidth - this.sBspan.offsetWidth
        }
        if(T > this.sBox.offsetHeight - this.sBspan.offsetHeight){
            T = this.sBox.offsetHeight - this.sBspan.offsetHeight
        }
        this.sBspan.style.left = L + "px";
        this.sBspan.style.top = T + "px";
        let X = L/(this.sBox.offsetWidth -  this.sBspan.offsetWidth);
        let Y = T/(this.sBox.offsetHeight - this.sBspan.offsetHeight);
        this.bBimg.style.left = (this.bBox.offsetWidth-this.bBimg.offsetWidth)*X+0.992+"px";
        this.bBimg.style.top = (this.bBox.offsetHeight-this.bBimg.offsetHeight)*Y-4.98+"px";
    }
    }
    new Magnifier({
        left:document.getElementById("left"),
        right:document.getElementById("right"),
        sBspan:document.querySelector(".smlbox span"),
        sBox:document.querySelector(".smlbox"),
        bBox:document.querySelector(".bigimg"),
        sBimg:document.querySelector(".smlbox img"),
        bBimg:document.querySelector(".bigimg img"),
        imgBox:document.querySelector(".magnifier"),
        imgs:document.querySelectorAll(".magnifier li img")
    })
   }
    
    
</script>
</html>